<template>
  <div class="phone-container main">
    <div class="phone-title">
      <div>三防设备</div>
    </div>
    <div class="phone-left phone-box">
      <x-map :data="mapPhones" :clickNumber="clickNumber"></x-map>
    </div>
    <div class="phone-right phone-box">
      <List :datas="phones" v-on:dot="getNumber"></List>
    </div>
  </div>
</template>

<script>
import XMap from 'components/view/x-map'
import List from './components/List'

export default {
  name: 'Phone',

  components: {
    XMap,
    List
  },

  data () {
    return {
      clickNumber: 2
    }
  },

  computed: {
    phones () {
      return this.$store.getters.phonesDevices
    },
    mapPhones () {
      let result = []
      this.phones.forEach((item) => {
        let typeName = ''
        if (item.type === 1) {
          typeName = '(平板)'
        } else {
          typeName = '(手机)'
        }
        let obj = {
          lng: item.location.lng,
          lat: item.location.lat,
          online: !!item.status,
          title: item.name + typeName,
          userName: item.user
        }
        result.push(obj)
      })
      return result
    }
  },

  mounted () {
  },

  methods: {
    getNumber (number) {
      this.clickNumber = number
    }
  },
  watch: {
  }
}
</script>

<style lang="stylus">
@import '../../../assets/stylus/base'
pt = 52px
ph = 70px
.phone-container {
  padding-top: pt;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: #fff;
  position:relative;
    .phone-title{
      height:ph;
      color:white;
      font-size:24px;
      line-height:ph;
      padding-left:30px;
    }
    .phone-box{
      position:absolute;
      top:pt+ph;
      bottom:0px;
    }
    .phone-left{
      right:320px;
      left:0px;
    }
    .phone-right{
      background: #1e1e1e;
      width:320px;
      right:0px;
    }
}
</style>
